<template>
  <div>
    <ol
      class="selector-tab-options"
      role="list"
      style="height: 248px"
      area="北京"
      v-if="Hiddenthis[0]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          东城区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          西城区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          朝阳区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          海淀区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          丰台区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          石景山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          通州区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          平谷区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          顺义区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          怀柔区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          密云区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          延庆区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          昌平区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          门头沟区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          房山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          大兴区
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      style="height: 250px"
      area="安徽"
      v-if="Hiddenthis[1]"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          合肥
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          蚌埠
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          亳州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          铜陵
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          马鞍山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          黄山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          六安
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          芜湖
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          安庆
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          淮北
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          宿州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          淮南
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          滁州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          阜阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          宣城
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          池州
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      style="height: 248px"
      area="上海"
      v-if="Hiddenthis[2]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          黄浦区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          徐汇区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          长宁区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          静安区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          普陀区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          虹口区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          杨浦区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          闵行区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          奉贤区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          金山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          松江区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          青浦区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          嘉定区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          浦东新区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          宝山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          崇明区
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      style="height: 248px"
      area="天津"
      v-if="Hiddenthis[3]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          和平区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          河东区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          河西区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          河北区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          南开区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          红桥区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          东丽区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          西青区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          津南区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          北辰区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          武清区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          宝坻区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          宁河区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          静海区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          蓟州区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          滨海新区
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      style="height: 620px"
      area="重庆"
      v-if="Hiddenthis[4]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          渝中区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          江北区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          沙坪坝区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          九龙坡区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          南岸区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          涪陵区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          巴南区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          北碚区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          长寿区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          大渡口区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          合川区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          江津区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          南川区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          黔江区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          万州区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          渝北区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          永川区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          璧山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          城口县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          垫江县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          丰都县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          奉节县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          开州区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          梁平区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          荣昌区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          铜梁区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          潼南区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          武隆区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          巫山县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          巫溪县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          云阳县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          忠县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          彭水苗族土家族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          石柱土家族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          酉阳土家族苗族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          秀山土家族苗族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          綦江区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          大足区
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="福建"
      v-if="Hiddenthis[5]"
      style="height: 186px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          福州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          厦门
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          龙岩
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          莆田
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          泉州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          漳州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          宁德
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          南平
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          三明
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="甘肃"
      v-if="Hiddenthis[6]"
      style="height: 248px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          兰州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          天水
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          庆阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          酒泉
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          白银
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          平凉
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          武威
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          张掖
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          嘉峪关
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          临夏回族自治州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          定西
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          甘南藏族自治州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          金昌
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          陇南
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="广东"
      v-if="Hiddenthis[7]"
      style="height: 372px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          广州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          惠州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          汕头
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          深圳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          珠海
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          东莞
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          中山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          佛山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          江门
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          清远
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          韶关
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          湛江
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          肇庆
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          茂名
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          梅州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          河源
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          阳江
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          揭阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          潮州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          汕尾
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          云浮
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="广西壮族自治区"
      v-if="Hiddenthis[8]"
      style="height: 248px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          桂林
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          南宁
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          柳州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          北海
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          梧州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          钦州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          玉林
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          百色
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          贵港
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          崇左
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          来宾
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          河池
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          防城港
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          贺州
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="贵州"
      v-if="Hiddenthis[9]"
      style="height: 186px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          贵阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          六盘水
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          遵义
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          毕节
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          黔南布依族苗族自治州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          黔东南苗族侗族自治州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          黔西南布依族苗族自治州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          铜仁
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          安顺
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="海南"
      v-if="Hiddenthis[10]"
      style="height: 310px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          海口
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          三亚
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          文昌
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          琼海
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          万宁
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          儋州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          东方
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          五指山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          临高县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          乐东黎族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          保亭黎族苗族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          定安县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          屯昌县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          昌江黎族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          澄迈县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          琼中黎族苗族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          白沙黎族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          陵水黎族自治县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          三沙
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="河北"
      v-if="Hiddenthis[11]"
      style="height: 186px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          保定
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          邯郸
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          廊坊
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          秦皇岛
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          石家庄
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          唐山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          张家口
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          沧州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          衡水
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          邢台
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          承德
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="河南"
      v-if="Hiddenthis[12]"
      style="height: 310px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          洛阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          新乡
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          许昌
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          郑州
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          安阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          漯河
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          开封
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          周口
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          平顶山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          鹤壁
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          焦作
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          三门峡
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          南阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          商丘
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          信阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          驻马店
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          濮阳
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          济源
        </button>
      </li>
    </ol>
    <ol
      class="selector-tab-options"
      role="list"
      area="黑龙江"
      v-if="Hiddenthis[13]"
      style="height: 248px"
    >
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="0"
        >
          哈尔滨
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          大庆
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          佳木斯
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          牡丹江
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          齐齐哈尔
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          鸡西
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          鹤岗
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          伊春
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          黑河
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          双鸭山
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          绥化
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          七台河
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="rc-province-selector-option rc-province-selector-option-city"
          tabindex="-1"
        >
          大兴安岭地区
        </button>
      </li>
    </ol>
  </div>
</template>

<script>
import bus from "../../../../../../../bus";
export default {
  data() {
    return {
      Allarea: [],
      Hiddenthis: [
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
      ],
      NowHight: [],
      HiddenTown: "",
      Everymeit: false,
      Ollength: "",
      NowAreas:'',
    };
  },
  created() {
    // 接收Contextone里面的内容
    const that = this;
    bus.$on("HiddenTown", function (data) {
      // 获取ol标签里面的属性值
      var Olarea = document.getElementsByClassName("selector-tab-options");
      // 新建一个数组，给Hiddenthis进行赋值
      if (that.Everymeit == false) {
        // 接收参数并保存下来
        that.Ollength = Olarea.length;
        for (let i = 0; i < Olarea.length; i++) {
          // 将ol的属性值全部添加到一个数组里面
          that.Allarea.push(Olarea[i].getAttribute("area"));
          //  获取ol的高度
          that.NowHight.push(
            Olarea[i].getAttribute("style").replace(/[^0-9]/gi, "")
          );
        }
      }
      var Hiddenthat = [];
      for (let j = 0; j < that.Ollength; j++) {
        Hiddenthat.push(false);
      }
      that.Hiddenthis = Hiddenthat;
      // 每次点击一下都会重新遍历取值，所以需要数组去重
      var newAllarea = [...new Set(that.Allarea)];
      // 检测索引
      var AreaNumber = newAllarea.indexOf(data);
      // 根据索引改变数组从而实现展示
      that.Hiddenthis.splice(AreaNumber, 1, true);
      // 传值给ContextOne从而改变展示的高度
      that.HiddenTown=that.Allarea[AreaNumber]
      bus.$emit("NowHight", that.NowHight[AreaNumber], that.HiddenTown);
      that.Everymeit = true;
    });
  },
  methods: {
    // 先将所有的ol标签隐藏
    HiddenOl() {
      var Olarea = document.getElementsByClassName("selector-tab-options");
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
ol {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    margin: 18px 10px 18px 0;
    text-align: left;
    button {
      border: none;
      background-color: #fff;
      cursor: pointer;
    }
  }
}
</style>